<script setup lang="ts">
import { computed } from 'vue';
import { beginTimeEndTimeConvert } from '/@/utils/time';
interface Props {
  id?: string;
  /**
   *步骤序号
   */
  stepNo?: number;
  /**
   *步骤描述
   */
  stepDesc?: string;
  /**
   *是否完成 1是 2否
   */
  isFinish?: 1 | 2;
  /**
   *用时 单位毫秒
   */
  useTime?: number;
  /**
   * 开始时间
   */
  beginTime?: number;
  /**
   * 结束时间
   */
  endTime?: number;
}

const props = withDefaults(
  defineProps<{
    list?: Props[];
    /**
     *状态 1未完成 2已结束
     */
    status?: number;
  }>(),
  {
    list: () => [],
    status: 0,
  },
);

const finishContent = computed(() => {
  return (item: Props) => {
    let content = '';
    content = item.isFinish === 1 ? '已完成' : '未完成';
    content +=
      item.beginTime && item.endTime
        ? '  用时:' + beginTimeEndTimeConvert(item.beginTime, item.endTime)
        : '';
    return content;
  };
});
</script>
<template>
  <view class="emergency-step-list">
    <view class="emergency-step-item" v-for="(item, index) in props.list" :key="item.id">
      <view class="emergency-step-item__border">
        <view class="emergency-step-item__border--left">
          <text>步骤{{ item.stepNo }}</text>
        </view>
        <view class="emergency-step-item__border--right">
          <text>{{ item.stepDesc || '' }}</text>
        </view>
      </view>
      <view class="emergency-step-item__line-wrapper">
        <view class="emergency-step-item__line-wrapper--left">
          <view class="emergency-step-item__line" v-if="index !== props.list.length - 1"></view>
        </view>
        <view
          :class="
            item.isFinish === 1
              ? 'emergency-step-item__line-wrapper--right-complete'
              : 'emergency-step-item__line-wrapper--right'
          "
          v-if="props.status === 2"
          >{{ finishContent(item) }}</view
        >
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.emergency-step-list {
  padding: 20px;
  .emergency-step-item {
    font-size: 30px;
    color: #333;

    &__border {
      margin-top: 5px;
      min-height: 100px;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      &--left {
        padding-left: 40px;
        padding-right: 40px;
      }

      &--right {
        flex: 1;
        padding-left: 40px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-left: 2px solid #ddd;
      }
    }

    &__line-wrapper {
      display: flex;
      align-items: center;
      min-height: 80px;
      &--left {
        flex: 1;
      }
      &--right {
        color: #fe963f;
      }
      &--right-complete {
        color: #577fe7;
      }
    }

    &__line {
      width: 1px;
      height: 80px;
      background-color: #ddd;
      margin-left: 100px;
    }
  }
}
</style>
